<template>
  <div>
    <table-search :search-form="tableSearch" :on-submit="handleSearch" :on-reset="handleReset" />
    <el-card class="app-page">
      <div class="content">
        <div class="app-table-action-wrap">
          <el-button
            type="primary"
            size="small"
          >
            作业监控
          </el-button>
        </div>
        <table-paging
          :table-list="tableData"
          :table-column="tableColumn"
          :table-buttons="tableButtons"
          :table-btn-width="180"
          :table-paging="pagination"
          :table-total="tableTotal"
          @pagingChange="handlePaginChange"
        />
      </div>
      <event-details ref="createRef" />
    </el-card>
  </div>
</template>

<script>
import { TableSearch, TablePaging } from '@/components'
import eventDetails from './details'
import { fetchEventList } from '@/api/sanitation/even'
import { tableColumn, tableSearch } from './config'
export default {
  name: 'EvenList',
  components: {
    TableSearch,
    TablePaging,
    eventDetails
  },
  data: function() {
    return {
      queryData: { },
      pagination: { page: 1, pagesize: 10 },
      tableSearch,
      tableData: [],
      tableColumn,
      tableTotal: 0,

      tableButtons: [
        {
          name: '详情',
          click: this.handleDetails
        },
        {
          name: '事件监控',
          click: this.handleMonitoring
        }
      ]

    }
  },
  created: function() {
    this.postEvenList()
  },
  methods: {

    postEvenList() {
      const params = { ...this.queryData, ...this.pagination }
      fetchEventList(params).then(res => {
        this.$data.tableData = res.records
        this.$data.tableTotal = res.total
      })
    },

    handleSearch(data) {
      this.$data.queryData = data
      this.postEvenList()
    },
    handleReset(data) {
      this.$data.queryData = data
      this.postEvenList()
    },
    handleDetails(id) {
      this.$refs.createRef.open(id)
    },
    handleMonitoring(id) {
    },
    handlePaginChange(pageInfo) {
      this.$data.pagination = pageInfo
      this.postEvenList()
    }
  }
}
</script>

<style>

</style>
